import { useEffect } from "react";
import { Card, List, Tabs } from "antd-mobile";
import { BOX4_ITEM } from "../../constants/index";
import { BOX4_NAME } from "../../constants/index";
import "./_box4.css";
import styles from "../global_box.css";
import style from "./box4.css";
import { Box4, Box42, Box43 } from "../../components/index_box/chart_box4";
import { useModel } from 'umi';

const BoxPage4 = () => {
    const { setName } = useModel('global')
    useEffect(() => {
        setName(BOX4_NAME)
    }, [])
    return (
        <div className={styles.bg}>
            <div style={{ height: '55px' }}></div>
            <Tabs>
                <Tabs.Tab title={BOX4_ITEM.LIST1.HEADER} key={1}>
                    <div className={styles.main}>
                        <div className={styles.top_echart}>
                            <div className={styles.title}>{BOX4_ITEM.LIST1.HEADER1}</div>
                            <Box4 hasTitle={false}></Box4>
                        </div>
                        <div className={styles.bottom_list}>
                            <List header={BOX4_ITEM.LIST1.HEADER2}>
                                {[1, 2, 3, 4, 5, 6].map(item => <List.Item key={item}>
                                    <Card title={"医疗机构"}>
                                        <div className={style.card_content} style={{ marginBottom: '12px' }}>
                                            <div>乡镇名称:乡镇名称</div>
                                            <div>所在区域:所在区域</div>
                                        </div>
                                        <div className={style.card_content}>
                                            <div>医生数量:10</div>
                                            <div className={style.createAt}>{"2024-4-22 11:36:00"}</div>
                                        </div>
                                    </Card>
                                </List.Item>)}
                            </List>
                        </div>
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title={BOX4_ITEM.LIST2.HEADER} key={2}>
                    <div className={styles.main}>
                        <div className={styles.top_echart}>
                            <div className={styles.title}>{BOX4_ITEM.LIST2.HEADER1}</div>
                            <Box42 hasTitle={false}></Box42>
                        </div>
                        <div className={styles.bottom_list}>
                            <List header={BOX4_ITEM.LIST2.HEADER2}>
                                {[1, 2, 3, 4, 5, 6].map(item => <List.Item key={item}>
                                    <Card title={"医疗机构"}>
                                        <div className={style.card_content} style={{ marginBottom: '12px' }}>
                                            <div>乡镇名称:乡镇名称</div>
                                            <div>所在区域:所在区域</div>
                                        </div>
                                        <div className={style.card_content}>
                                            <div>医生数量:10</div>
                                            <div className={style.createAt}>{"2024-4-22 11:36:00"}</div>
                                        </div>
                                    </Card>
                                </List.Item>)}
                            </List>
                        </div>
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title={BOX4_ITEM.LIST3.HEADER} key={3}>
                    <div className={styles.main}>
                        <div className={styles.top_echart}>
                            <div className={styles.title}>{BOX4_ITEM.LIST3.HEADER1}</div>
                            <Box43 hasTitle={false}></Box43>
                        </div>
                        <div className={styles.bottom_list}>
                            <List header={BOX4_ITEM.LIST3.HEADER2}>
                                {[1, 2, 3, 4, 5, 6].map(item => <List.Item key={item}>
                                    <Card title={"医疗机构"}>
                                        <div className={style.card_content} style={{ marginBottom: '12px' }}>
                                            <div>乡镇名称:乡镇名称</div>
                                            <div>所在区域:所在区域</div>
                                        </div>
                                        <div className={style.card_content}>
                                            <div>医生数量:10</div>
                                            <div className={style.createAt}>{"2024-4-22 11:36:00"}</div>
                                        </div>
                                    </Card>
                                </List.Item>)}
                            </List>
                        </div>
                    </div>
                </Tabs.Tab>
            </Tabs>
        </div>
    );
};

export default BoxPage4;
